feat(design-system): add `DsSplitButton` component [AR-54024] by iromanchuk-dn · Pull Request #347 · drivenets/design-system

iromanchuk-dn · 2026-04-03T18:43:44Z

Jira | Figma

Depends on:

Showcase

Screen.Recording.2026-04-09.at.17.41.38.mov

vpolessky-dn · 2026-04-07T11:24:12Z

missing browser test fro the button

…24-design-system-split-button

vpolessky-dn · 2026-04-08T14:43:47Z

+$divider-z-index: $highlighted-z-index + 1;
+$divider-width: 1px;
+$border-width: 1px;
+$button-transition-duration: 0.15s;


transition standard is .2s

I made it aligned with DsButtonV3, it's important to have the same duration, because $button-transition-duration affects button right border.

So maybe add a comment about this?
Or even better, let's try to find a way to share it and have a single source of truth
I'll just note that I'm afraid that importing it as a SCSS variable will import & bundle the whole button SCSS file, so need to be careful with that

…24-design-system-split-button

StyleShit · 2026-04-12T05:33:36Z

+						'aria-label': 'Refresh',
+						onClick,
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,


I think you don't need any of the as DsSelectProps

StyleShit · 2026-04-12T05:34:31Z

+	value: '30',
+	onValueChange: vi.fn(),
+	multiple: false,
+} as const satisfies Partial<DsSelectProps>;


this could be simplified to:

Suggested change

} as const satisfies Partial<DsSelectProps>;

} satisfies DsSelectProps;

StyleShit · 2026-04-12T05:36:31Z

+						'aria-label': 'Refresh',
+						onClick,
+					},
+					select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,


you're overriding an existing prop in all tests for no reason. This can be simplified in all cases:

Suggested change

select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,

select: defaultSelect,

StyleShit · 2026-04-12T05:41:49Z

+$divider-z-index: $highlighted-z-index + 1;
+$divider-width: 1px;
+$border-width: 1px;
+$button-transition-duration: 0.15s;


So maybe add a comment about this?
Or even better, let's try to find a way to share it and have a single source of truth
I'll just note that I'm afraid that importing it as a SCSS variable will import & bundle the whole button SCSS file, so need to be careful with that

StyleShit · 2026-04-12T05:44:06Z

Seems like there are some padding-top issues with the small size (maybe bug in the select component itself?):

It is a known bug in the DsSelect component.
https://drivenets.atlassian.net/browse/AR-52305

StyleShit · 2026-04-12T05:48:41Z

why is this component closed to a specific use case / composition?

That's not the what happens in MUI or Chakra

(also, maybe we could reconsider the naming here, according to the above examples)

We have discussed this idea in the team. Designers do not have a plan to combine other components in a similar manner. Also it would be extremely hard to handle all possible scenarios and support them.

StyleShit · 2026-04-12T05:50:03Z

+	const { className: buttonClassName, disabled: buttonDisabled, ...buttonRest } = slotProps.button;
+
+	const { className: selectClassName, disabled: selectDisabled, ...selectRest } = slotProps.select;


nitpick, non-blocker

maybe this is nicer? 😅

Suggested change

const { className: buttonClassName, disabled: buttonDisabled, ...buttonRest } = slotProps.button;

const { className: selectClassName, disabled: selectDisabled, ...selectRest } = slotProps.select;

const { className: buttonClassName, disabled: buttonDisabled, ...buttonProps } = slotProps.button;

const { className: selectClassName, disabled: selectDisabled, ...selectProps } = slotProps.select;

StyleShit · 2026-04-12T05:57:50Z

+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>;


🔥

maybe at some point we'll have a type-utils.ts file
I guess we should keep this in mind once we'll add more utils like this

To be honest, I was thinking about the same. It looks like an utility we may use in multiple components. I think I will do it now, someone needs to start it.

StyleShit · 2026-04-12T05:59:20Z

+export const getSelectSize = (size: SplitButtonSize): SelectSize => {
+	return size === 'medium' ? 'default' : 'small';
+};


IMO having a whole file for this is overkill
I would put this in the component itself as a variable 🤷

…24-design-system-split-button

feat(design-system): add DsSplitButton component [AR-54024]

51977d0

github-actions bot added the design-system label Apr 3, 2026

iromanchuk-dn requested review from StyleShit, aroba-dn and vpolessky-dn April 3, 2026 18:44

Update inline comment

6f82b6c

vpolessky-dn reviewed Apr 7, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/ds-split-button.module.scss

vpolessky-dn reviewed Apr 7, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/index.ts Outdated

vpolessky-dn reviewed Apr 7, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/ds-split-button.types.ts

iromanchuk-dn added 4 commits April 7, 2026 21:36

Merge branch 'main' of github.com:drivenets/design-system into AR-540…

29a2d5a

…24-design-system-split-button

Merge branch 'main' of github.com:drivenets/design-system into AR-540…

2f53c07

…24-design-system-split-button

use DsButtonV3 and fixes to Input based components

cca6e3c

add browser tests

2e13f71

iromanchuk-dn requested a review from vpolessky-dn April 8, 2026 14:35

vpolessky-dn reviewed Apr 8, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/ds-split-button.types.ts Outdated

vpolessky-dn reviewed Apr 8, 2026

View reviewed changes

iromanchuk-dn added 2 commits April 8, 2026 16:49

Merge branch 'main' of github.com:drivenets/design-system into AR-540…

6ce88da

…24-design-system-split-button

fix styles; exclude some props

179ff73

iromanchuk-dn requested a review from vpolessky-dn April 8, 2026 16:38

vpolessky-dn previously approved these changes Apr 9, 2026

View reviewed changes

Merge branch 'main' of github.com:drivenets/design-system into AR-540…

696432a

…24-design-system-split-button

StyleShit requested changes Apr 12, 2026

View reviewed changes

iromanchuk-dn added 2 commits April 14, 2026 17:27

Merge branch 'main' into AR-54024-design-system-split-button

6e700bb

fox some PR comments

b9883c2

iromanchuk-dn dismissed vpolessky-dn’s stale review via b9883c2 April 14, 2026 15:32

iromanchuk-dn added 3 commits April 15, 2026 12:32

Move DistributiveOmit into type-utils.ts

541034e

cleanup tests

01e7d28

Reuse the same scss variable across components

9846ece

iromanchuk-dn requested a review from StyleShit April 15, 2026 11:38

iromanchuk-dn requested a review from vpolessky-dn April 15, 2026 11:38

Merge branch 'main' of github.com:drivenets/design-system into AR-540…

b3939c9

…24-design-system-split-button

mmurawski-dn reviewed Apr 15, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/ds-split-button.types.ts

mmurawski-dn reviewed Apr 15, 2026

View reviewed changes

Comment thread packages/design-system/src/components/ds-split-button/ds-split-button.types.ts

mmurawski-dn previously approved these changes Apr 15, 2026

View reviewed changes

StyleShit previously approved these changes Apr 15, 2026

View reviewed changes

Make size a responsive property

061d838

iromanchuk-dn dismissed stale reviews from StyleShit and mmurawski-dn via 061d838 April 15, 2026 13:04

StyleShit approved these changes Apr 15, 2026

View reviewed changes

mmurawski-dn approved these changes Apr 15, 2026

View reviewed changes

vpolessky-dn approved these changes Apr 15, 2026

View reviewed changes

Merge branch 'main' into AR-54024-design-system-split-button

b44107b

iromanchuk-dn merged commit 43d78e2 into drivenets:main Apr 15, 2026
17 checks passed

	} as const satisfies Partial<DsSelectProps>;
	} satisfies DsSelectProps;

	select: { ...defaultSelect, onValueChange: vi.fn() } as DsSelectProps,
	select: defaultSelect,

		const { className: buttonClassName, disabled: buttonDisabled, ...buttonRest } = slotProps.button;

		const { className: selectClassName, disabled: selectDisabled, ...selectRest } = slotProps.select;

		type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
		type SelectSlotProps = DistributiveOmit<DsSelectProps, 'size'>;

Conversation

iromanchuk-dn commented Apr 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Showcase

Uh oh!

Uh oh!

Uh oh!

Uh oh!

vpolessky-dn commented Apr 7, 2026

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

iromanchuk-dn commented Apr 3, 2026 •

edited

Loading